<template>
  <view class="bg plr-20 gray-2">
    <view class="status_bar"></view>

    <!-- <image src="../../static/homeImg.png" class="homeImg mtb-34"></image> -->

    <view class="search-wrap">
		<view class="search-box">
			<image src="../../static/search-001.png" mode=""></image>
			<input
			 type="button"
			 v-model="query.search"
			 placeholder="请输入搜索内容"
			 @input="toSearch"
			>
			<image src="/static/icon-close.png" v-show="query.search" @click="query.search = ''; toSearch()"></image>
		</view>
      <!-- <u-search
        placeholder="请输入搜索内容"
        @change="toSearch"
        search-icon-color="##A1A1A1"
        v-model="query.search"
        placeholder-color="#A1A1A1"
        style="color: #fff; margin-left: -18rpx; height: 40px;"
        color="#3c3c3c"
        bg-color="#fff"
        :show-action="false"
      ></u-search> -->

      <!-- <view class="sort" @click="initTime">
        <view>时间</view>
        <image src="../../static/sort.png" v-if="query.time_order === ''" />
        <image src="../../static/sort-asc.png" v-if="query.time_order === 1" />
        <image src="../../static/sort-desc.png" v-if="query.time_order === 2" />
      </view> -->
			
			<!-- 1=正序 2=倒叙 -->
     <!-- <view class="sort" @click="initPrice">
        <view>价格</view>
        
        <image src="../../static/sort.png" v-if="query.price_order === ''" />
        <image src="../../static/sort-asc.png" v-if="query.price_order === 1" />
        <image src="../../static/sort-desc.png" v-if="query.price_order === 2" />
      </view> -->
    </view>

    <!-- <u-search placeholder="请输入搜索内容" @custom="toSearch" search-icon-color="#EFAA1C" v-model="query.search"
			placeholder-color="#999" style="color:#fff;" color="#fff" bg-color="#262729"></u-search> -->

		<view class="flex mtb-34 white pl-60 pr-60">
			<picker @change="bindPickerChange" :range="array">
			                       
			<view class="flex mr-40 sort">
				<view class="mr-10 size-28" style="color: #58687C;">{{ midIndex == 0 ? '藏品' : '盲盒' }}</view>
        <image src="../../static/sort-desc.png"/>
				<!-- <view class="">
					<u-icon style="display: block;" name="arrow-down-fill" size="14" color="#fff"></u-icon>
				</view> -->
			</view>
			</picker>
			<view class="flex mr-40 sort" @click="initTime">
				<view class="mr-10 size-28" style="color: #58687C;">时间</view>
        <image src="../../static/sort.png" v-if="query.time_order === ''" />
        <image src="../../static/sort-asc.png" v-if="query.time_order === 1" />
        <image src="../../static/sort-desc.png" v-if="query.time_order === 2" />
				<!-- <view class="">
					<u-icon  style="display: block;" name="arrow-up-fill" size="14"
						:color="query.time_order == 1 ? '#fff':'#666'"></u-icon>
					<u-icon style="display: block;" name="arrow-down-fill" size="14"
						:color="query.time_order == 2 ? '#fff' : '#666'"></u-icon>
				</view> -->
			</view>
			<view class="flex ml-40 sort" @click="initPrice">
				<view class="mr-10 size-28" style="color: #58687C;">价格</view>
        <image src="../../static/sort.png" v-if="query.price_order === ''" />
        <image src="../../static/sort-asc.png" v-if="query.price_order === 1" />
        <image src="../../static/sort-desc.png" v-if="query.price_order === 2" />
				<!-- <view class="">
					<u-icon style="display: block;" name="arrow-up-fill" size="14"
						:color="query.price_order==1?'#fff':'#666'"></u-icon>
					<u-icon style="display: block;" name="arrow-down-fill" size="14"
						:color="query.price_order==2?'#fff':'#666'"></u-icon>
				</view> -->
			</view>
		</view>

    <!-- <view class="flex radius-45 mb-30 ptb-12 plr-10 bg-1a gold">
      <view :class="['radius-34', 'ptb-20', 'midItem', midIndex == 0 ? 'midActive' : '']" @click="changeMid(0)"> 藏品 </view>
      <view :class="['radius-34', 'ptb-20', 'midItem', midIndex == 1 ? 'midActive' : '']" @click="changeMid(1)"> 盲盒 </view>
    </view> -->

    <!-- 藏品列表 -->
    <empty v-if="list.length == 0"></empty>

    <view class="collect-container">
		<view class="collect-item mb-20 size-22" v-for="(item, index) in list" :key="index" @click="goDetails(item)">
			<view class="collect-image-wrap">
			  <image class="collect-img" :src="item.image" mode="aspectFill"></image>
			</view>
			<view class="plr-20 ptb-20 white collect-item-mess" style="position: relative;">
				<image src="/static/bg-001.png" style="position: absolute; top: 0; left: 10px; width: 100%; height: 110px;" mode="aspectFill"></image>
			  <view class="flex flex-start">
				<view class="size-32 ell1 white title"> {{ item.name }}</view>
				<image src="../../static/icon-15.png" class="homeIcon ml-20" mode=""> </image>
				<!-- <image src="../../static/homeIcon.png" class="homeIcon ml-20" mode="" v-if="midIndex == 0"> </image> -->
			  </view>
			  <view class="item-num">
				  <text>编号</text>
				  <text>{{ item.number_f }}/{{ item.stock }}</text>
			  </view>
			  <view class="item-price">
			  	￥{{ item.price }} 
			  </view>
			  <!-- <view class="mt-20 flex flex-start" v-if="midIndex == 0">
				<view class="tipsLeft mr-10 plr-10 ptb-4 radius-6 bg-gold color-1a">
				  {{ item.goods_category_name }}
				</view>
				<view class="tipsRight ptb-4 gold plr-10 radius-6" v-if="item.label">{{ item.label }}</view>
							
			  </view>
						<view class="mt-20" v-if="midIndex == 0">{{ item.number_f }}/{{ item.stock }}</view>
			  <view class="flex flex-between mt-20">
				<view class="flex flex-start">
				  <image :src="item.author_image || item.head_image" class="userImg" mode="aspectFill"></image>
				  <view class="size-24 ml-8 ell1" style="flex: 1;color:#3c3c3c">{{ item.author_name || item.nick_name }}</view>
				</view>
				<view class="size-36 bold gold"> ￥{{ item.price }} </view>
			  </view> -->
			</view>
		</view>
    </view>
    <tabbar ref="tabbar"></tabbar>
  </view>
</template>

<script>
import empty from '../../components/empty.vue'
import tabbar from '../../components/tabbar.vue'
export default {
  components: {
    empty,
    tabbar,
  },
  data() {
    return {
      flag: false, //上拉加载
      midIndex: 0,
      query: {
        page: 1,
        pagesize: 10,
        search: '',
        time_order: '',
        price_order: '',
      },
      status: 'more',
      list: [],
			array:['藏品','盲盒']
    }
  },
  onShow() {
    this.init()
    this.$refs['tabbar'].init();
  },
  onHide() {
    this.midIndex = 0
    this.flag = false
    this.status = 'more'
    this.list = []
    this.query = {
      page: 1,
      pagesize: 10,
      search: '',
      // 1=正序 2=倒叙
      time_order: '',
      // 1=正序 2=倒叙
      price_order: '',
    }
  },
  onReachBottom() {
    if (!this.flag) {
      this.status = 'loading'
      this.query.page++
      this.init()
    }
  },
  onPullDownRefresh() {
    this.flag = false
    this.query.page = 1
    this.list = []
    this.init()
  },
  methods: {
		bindPickerChange (e) {
			this.midIndex = e.detail.value
			this.list = []
			this.query = {
			  page: 1,
			  pagesize: 10,
			  search: '',
			  time_order: '',
			  price_order: '',
			}
			this.init()
		},
		initCut () {
			
		},
    // 选择是版权品还是盲盒
    changeMid(index) {
      this.midIndex = index
      this.list = []
      this.query = {
        page: 1,
        pagesize: 10,
        search: '',
        time_order: '',
        price_order: '',
      }
      this.init()
    },
    // 时间排序
    initTime() {
      if (this.query.time_order === '') {
        this.query.time_order = 1
      } else if (this.query.time_order === 1) {
        this.query.time_order = 2
      } else if (this.query.time_order === 2) {
        this.query.time_order = 1
      }
      this.query.price_order = ''
      this.list = []
      this.query.page = 1
      this.init()
    },
    // 价格排序
    initPrice() {
      if (this.query.price_order === '') {
        this.query.price_order = 1
      } else if (this.query.price_order === 1) {
        this.query.price_order = 2
      } else if (this.query.price_order === 2) {
        this.query.price_order = 1
      }
      this.query.time_order = ''
      this.list = []
      this.query.page = 1
      this.init()
    },
    init() {
      if (this.midIndex == 0) {
        this.$http('api/trade/tradeGoodsList', this.query).then(res => {
          uni.stopPullDownRefresh()
          let data = res.data
          if (data.length == 0) {
            this.flag = true
            this.status = 'noMore'
          } else {
            this.list = this.list.concat(data)
            if (data.length < 10) {
              this.flag = true
              this.status = 'noMore'
            }
          }
        })
      } else {
        this.$http('api/trade/tradeBoxList', this.query).then(res => {
          uni.stopPullDownRefresh()
          let data = res.data
          if (data.length == 0) {
            this.flag = true
            this.status = 'noMore'
          } else {
            this.list = this.list.concat(data)
            if (data.length < 10) {
              this.flag = true
              this.status = 'noMore'
            }
          }
        })
      }
    },
    toSearch() {
      this.query.page = 1
      this.list = []
      this.init()
    },
    goDetails(item) {
      if (this.midIndex == 0) {
        uni.navigateTo({
          url: `./marketCollect?goodsId=${item.id}`,
        })
      } else {
        uni.navigateTo({
          url: `./marketBox?boxId=${item.id}`,
        })
      }
    },
  },
}
</script>
<style>
	page {
	  background: #f0f2f5;
	}
</style>
<style lang="less" scoped>
page{
	background: #f0f2f5;
}
.white {
  color: #3c3c3c;
}
.gold {
  color: #9c8b66;
}
.search-wrap {
  display: flex;
  align-items: center;
  padding: 20rpx 0 0;
  .sort {
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    image {
      width: 16rpx;
      height: 24rpx;
      margin-left: 10rpx;
    }
    & + .sort {
      margin-left: 40rpx;
    }
  }
}

.homeImg {
  width: 342rpx;
  height: 60rpx;
}
.collect-container {
	display: flex;
	flex-wrap: wrap;
}
.collect-item {
    width: calc(50% - 5px);
	background-color: #fff;
	// padding: 20rpx;
	// height: 260rpx;
	display: flex;
	flex-direction: column;
	border-radius: 11rpx;
	overflow: hidden;
	&:nth-child(2n) {
		margin-left: 8px;
	}
	.collect-item-mess{
		display: flex;
		flex-direction: column;
		flex: 1;
		justify-content: space-between;
	}
    .collect-image-wrap {
      .collect-img {
		width: 100%;
		height: 170px;
		// border-radius: 8rpx 0 0 8rpx;
      }
    }
	.item-num{
		width: max-content;
		height: 24px;
		line-height: 24px;
		border-radius: 4px;
		display: flex;
		overflow: hidden;
		margin-top: 8px;
		text:first-child{
			background: #F3C999;
			padding: 0 5px;
			color: #565656;
		}
		text:last-child{
			background: #EAD5B6;
			padding: 0 5px;
			color: #9B8667;
		}
	}
	.item-price {
		font-size: 19px;
		font-weight: bold;
		color: #333333;
		margin-top: 8px;
	}
  }

.homeIcon {
  width: 40rpx;
  height: 40rpx;
}

.tipsRight {
  background: rgba(255, 255, 255, 0.2);
}

.userImg {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}

/deep/ .u-action-active {
  color: #fff;
}

.midItem {
  width: 335rpx;
  height: 68rpx;
  // color: #999;
  font-size: 26rpx;
  text-align: center;
}

.midActive {
  background: #efe0c0;
  color: #1a1a1a;
}
.title {
  font-weight: 600;
}
.sort {
    display: flex;
    align-items: center;
    margin-left: 10rpx;
    image {
      width: 16rpx;
      height: 24rpx;
      margin-left: 10rpx;
    }
    & + .sort {
      margin-left: 40rpx;
    }
  }
  .search-box{
	  width: 100%;
	  height: 40px;
	  background: #FFFFFF;
	  border-radius: 20px;
	  display: flex;
	  align-items: center;
	  box-sizing: border-box;
	  padding: 0 10px;
	  image:first-child {
		  width: 20px;
		  height: 20px;
		  margin-right: 10px;
	  }
	  input {
		  flex: 1;
		  font-size: 14px;
		  color: #333333;
		  &::placeholder {
		    color: #A1A1A1;
		  }
	  }
	  image:last-child {
		  width: 15px;
		  height: 15px;
	  }
  }
</style>
